<template>
  <div class="box">
    <div class="head">
      <div class="headTitle">以太坊异常交易检测</div>
      <div class="search">
        <el-input placeholder="请输入内容" v-model="input1">
          <template slot="prepend">交易哈希</template>
          <el-button slot="append" icon="el-icon-upload2"></el-button>
        </el-input>
      </div>
    </div>
    <div class="body">
      <div class="bodyLeft">
        <div class="bodyLeftTop">
          <div class="transactions">
            <span class="sp1"><i class="el-icon-files"></i></span>
            <div class="tarnLeft">
              <p class="biaoti">总交易检测数</p>
              <p>1288</p>
            </div>
          </div>
          <div class="AbnormalTransaction">
            <span class="sp2"><i class="el-icon-document-delete"></i></span>
            <p class="biaoti">异常交易数</p>
            <p>100</p>
          </div>
        </div>
        <div class="bodyLeftBottom">
          <div class="lastTransaction">
            <span><i class="el-icon-position"></i></span>
            <div class="lastText">
              <p class="biaoti">最新交易检测地址</p>
              <p>0x3711h3l222349hnl2234299</p>
            </div>

            <p></p>
          </div>
          <div class="lastTransactionAb">
            <span><i class="el-icon-thumb"></i></span>
            <p class="biaoti">最新交易检测结果</p>
            <p>异常</p>
          </div>
        </div>
      </div>
      <!-- 准备具有宽高的容器 -->
      <div style="width: 700px; height: 250px" ref="chart" class="data"></div>
    </div>

    <div class="foter" style="width: 100%">
      <div class="lastTxn">
        <p>最新检测交易</p>
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="date" label="交易时间" width="180">
          </el-table-column>
          <el-table-column prop="name" label="交易哈希" width="358">
          </el-table-column>
          <el-table-column prop="address" label="检测结果"> </el-table-column>
        </el-table>
      </div>
      <div class="lastTxnRight">
        <p>以太坊最新交易</p>
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="date" label="交易时间" width="180">
          </el-table-column>
          <el-table-column prop="name" label="交易哈希" width="358">
          </el-table-column>
          <el-table-column prop="address" label="检测结果"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
let Echarts = require("echarts/lib/echarts"); //基础实例 注意不要使用import
require("echarts/lib/component/grid");
require("echarts/lib/chart/line");
export default {
  data() {
    return {
      chart: null,
      tableData: [
        {
          date: "2022-05-02",
          name: "0xedeC6Bf37B2A833Ac18EF87a9226b60aECCf3815",
          address: "正常",
        },
        {
          date: "2022-05-04",
          name: "0xedeC6Bf37B2A833Ac18EF87a9226b60aECCf3815",
          address: "异常",
        },
        {
          date: "2022-05-01",
          name: "0xedeC6Bf37B2A833Ac18EF87a9226b60aECCf3815",
          address: "异常",
        },
        {
          date: "2022-05-03",
          name: "0xedeC6Bf37B2A833Ac18EF87a9226b60aECCf3815",
          address: "异常",
        },
      ],
    };
  }, //图表实例
  mounted() {
    this.init();
  },
  methods: {
    //可视化
    init() {
      //2.初始化
      this.chart = Echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        xAxis: {
          type: "category",
          data: ["10.1", "10.2", "10.3", "10.4", "10.5", "10.6", "10.7"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [20, 32, 19, 34, 90, 30, 20],
            type: "line",
            smooth: true,
          },
        ],
      };
      // 4.传入数据
      this.chart.setOption(option);
    },

    // 左表格
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style>
.box {
  background-color: #f8f9fa;
}
.head {
  padding-top: 30px;
  padding-bottom: 100px;
  /* background-image: url("./Snipaste_2022-11-01_20-26-02.png"); */
  background-color: #304156;
  border-radius: 10px;
}
.head .headTitle {
  font-size: 40px;
  color: white;
}
.head .search {
  margin-top: 20px;
  margin-right: 500px;
}
.body {
  display: flex;
  flex-direction: row;
  position: relative;
  top: -50px;
  left: 40px;
  background-color: white;
  width: 1250px;
  height: 180px;
  border-radius: 10px;
}
.AbnormalTransaction {
  margin-right: 50px;
}
.bodyLeft {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40%;
  /* margin-bottom: 20px; */
}
.bodyLeftTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.transactions {
  position: relative;
}
.biaoti {
  color: #77838f;
}
.transactions .sp1 {
  position: absolute;
  top: 20px;
  left: 10px;
  font-size: 30px;
}
.AbnormalTransaction {
  position: relative;
}
.AbnormalTransaction .sp2 {
  position: absolute;
  top: 20px;
  left: -38px;
  font-size: 30px;
}
.tarnLeft {
  margin-left: 50px;
}
.lastText {
  margin-left: 50px;
}
.lastTransaction {
  position: relative;
}
.lastTransactionAb {
  position: relative;
}
.lastTransactionAb span {
  position: absolute;
  top: 20px;
  left: -38px;
  font-size: 30px;
}
.lastTransaction span {
  position: absolute;
  left: 10px;
  top: 20px;
  font-size: 30px;
}
.bodyLeftBottom {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.data {
  position: relative;
  top: -40px;
}
.foter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.lastTxn {
  margin-top: -30px;
  border-radius: 10px;
  background-color: #fff;
  width: 650px;
}
.lastTxnRight {
  margin-top: -30px;
  border-radius: 10px;
  background-color: #fff;
  width: 650px;
}
.lastTxnRight p {
  font-size: 23px;
  font-weight: 800;
}
.lastTxn p {
  font-size: 23px;
  font-weight: 800;
}
</style>